<template>
<el-card  shadow="never" header="个人信息" class="container">
  <!-- 图片裁剪组件 -->
  <sc-cropper :src="avatar" :compress="compress" :aspectRatio="aspectRatio" ref="cropper" :confirm="confirmCropper"></sc-cropper>
  <div class="default-avatar-select">
      <h1>内置头像</h1>
      <div class="default-avatar-box">
        <div class="default-avatar-box-item" v-for="item in defaultImages" :key="item" @click="selectDefaultAvatar(item)">
          <img :src="item" />
        </div>
      </div>
  </div>
  <div class="default-avatar-select">
    <h1>上传头像</h1>
  </div>
  <el-button type="primary" @click="uploadAvatar">
    选择头像
    <input type="file" ref="upload" style="display: none" @change="selectFile" />
  </el-button>

</el-card>
</template>

<script>
import scCropper from '@renderer/components/scCropper'
import PubSub from 'pubsub-js'
export default {
  name: "avatar",
  components: {
    scCropper
  },
  data(){
    return {
      avatar: this.$TOOL.data.get("USER_INFO").avatar,  // 用户头像
      userInfo: this.$TOOL.data.get("USER_INFO"),       // 用户信息
      compress: 0.5,  // 图片压缩比例
      aspectRatio: 1,  // 图片裁剪比例
      defaultImages: [
        'https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/1.png',
        'https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/2.png',
        'https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/3.png',
        'https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/4.png',
        'https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/5.png',
        'https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-04-04/6.png',
      ]  // 默认头像
    }
  },
  methods: {
    // 选择默认头像
    selectDefaultAvatar(item){
      this.avatar = item
    },
    //上传头像
    uploadAvatar(){
      this.$refs.upload.click();
    },
    // 选择文件
    async selectFile(e){
      if(!e.target.files || e.target.files.length <= 0){
        return;
      }
      let file = e.target.files[0]
      const base64 = await this.$TOOL.oss.file2Base64(file)
      this.avatar = base64
    },
    //确认裁剪
    async confirmCropper(file){
      const data = await this.$TOOL.oss.upload(file)
      // 调接口
      const params = {
        id: this.userInfo.id,
        avatar: data.url
      }
      try {
        const res = await this.$API.auth.updateAvatar.post(params)
        this.$message.success(res.msg)
        this.userInfo.avatar = data.url
        this.$TOOL.data.set("USER_INFO", this.userInfo)
        //发布
        PubSub.publish("user-info-modify", 'avatar-updated')
      } catch (error) {
        console.error(error)
        this.$message.error('上传头像失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.default-avatar-select{
  h1{
  font-size: 17px;margin: 20px 0;
  }
}
.default-avatar-box{
  display: flex;
  .default-avatar-box-item{
    width: 60px; height: 60px; background: #f5f5f5; border: #f2f2f2 solid 2px; border-radius: 50%; margin: 0 10px 0 0; cursor: pointer;
    img{
      width: 100%; height: 100%;
    }
  }
  .default-avatar-box-item:hover{
    background: #e5e5e5;
    border-color: var(--el-color-primary);
  }
}
</style>
